import React from 'react';
import { connect } from 'react-redux';
import { initDetail } from '../store/actionCreators.js'
import { BaseTitle, } from '../style.js'
import dayjs from 'dayjs'
// import { Link } from 'react-router-dom'

class Detail extends React.PureComponent {

    constructor (props) {
        super(props)
        if(this.props && this.props.match && this.props.match.params && this.props.match.params.id){
           this.date = this.props.match.params.id;
        };
    }

    getDetailView() {
        const { detail } = this.props;
        return (
            <div>
                <div>iOS</div>
                {
                    detail.iOS.map(function (item) {
                        return (
                            <div key={item.get('_id')}>
                                <a href={item.get('url')}>
                                    {item.get('desc')}
                                </a>
                                {'(' + item.get('who') + ')'}
                            </div>
                        )
                    })
                }
            </div>
        )
    };

    render() {
        const date = this.props.match.params.id;
        return (
            <div>
                <BaseTitle>
                    {date}
                </BaseTitle>
                <div>{this.props.match.params.id}</div>
                {this.getDetailView()}
            </div>
        )
    };

    componentDidMount() {
        const id = this.props.match.params.id;
        // const index = this.props.location.index;
        const date = dayjs(id).format('YYYY/MM/DD');
        console.log(date);
        // console.log(index);
        if (date === undefined) {
            console.log('date === undefined')
        } else {
            this.props.initData(date)
        }
    }
}

const mapStateToProps = (state) => {
    return {
        detail: state.get('detail').toObject(),
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        initData(days) {
            const action = initDetail(days);
            dispatch(action);
        },
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Detail);
